@import "tailwindcss";

@theme{

    /*自定义动画*/
    --animate-move: move 2s ease-in-out 1;

    /*重写动画*/
    --animate-spin-3s: spin 3s ease-in-out 1;



    @keyframes move {
        from{
            transform: translateX(0);
        }
        to{
            transform: translateX(100px);
        }

    }

    @keyframes scroll-to-left {
        to {
            left: -120px;
        }
    }
    --animate-scroll: scroll-to-left 10s linear infinite;
}

@utility animate-duration-*{
    animation-duration: calc(--value(integer) * 1s);
}

@utility transform-ry-*{
    --c: 12;
    --r: 120px;

    transform: rotate(calc(360deg/var(--c) * --value(integer))) translateY(var(--r))

}
@utility animate-paused{
    animation-play-state: paused;
}

@utility scroll-delay-*{
    animation-delay: calc(10 / 5 * (5 - --value(integer)) * -1s);
}
@utility left-calc{
    left: max(calc(120px * 5) , 100%);
}
